<template lang="pug">
  el-drawer.commonDrawer(
    title="我的素材"
    :visible.sync="visibleDialog"
    v-loading="loading"
    custom-class="commonDrawer"
    direction="rtl"
    size="840px"
    append-to-body
    destroy-on-close
    modal-append-to-body
  )
    .drawer-content
      el-row(:gutter="30" v-if="list.length > 0")
        el-col(v-for="(course, index) in list" :span="12" :key="course.id")
          item(:detail="course" :isMy="true")
    .drawer-footer.tr
      i-pagination(
        v-bind="pagination"
        @pagination="values => getList({ ...values, ...filterData })"
      )
</template>
<script>
import { mapGetters } from 'vuex'
import IPagination from '@/components/Basic/Pagination'
import { getDocList } from '../api'
import Item from './item'

export default {
  components: {
    IPagination,
    Item
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dirType: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      list: [],
      pagination: {
        total: 0,
        pageSize: 8,
        pageNum: 0
      }
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (values) {
      const { curArea, pagination, user } = this
      const { pageSize, pageNum } = pagination
      this.loading = true
      getDocList({ dirType: this.dirType, createdBy: user.id, areaId: curArea.areaId, pageSize, pageNum, ...values }).then(res => {
        console.log(res)
        this.pagination = {
          total: res.totalElements,
          pageNum: res.number,
          pageSize: pageSize
        }
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  padding: 0 24px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
</style>
